﻿@{
    ViewBag.Title = "Home Page";
}
<link href="~/layui/css/layui.css" rel="stylesheet" />
<main>

    <div class="layui-tab layui-tab-card">
        <ul class="layui-tab-title">
            <li class="layui-this">KOL画像数据</li>
            <li>TV收视数据</li>
            <li>KOL推及电视</li>
            <li>电视推及KOL</li>
        </ul>
        <div class="layui-tab-content" style="height: 100px;">
            <div class="layui-tab-item layui-show">

           
                <table id="test" lay-filter="test1" style="width:90%"></table>

            </div>
            <div class="layui-tab-item">

                <table id="test2" lay-filter="test2" style="width:90%"></table>

            </div>
            <div class="layui-tab-item">
          

                <form class="layui-form" action="">
                    <div class="layui-inline">
                        <label class="layui-form-label" style="width:100px">KOL账号</label>
                        <div class="layui-input-inline">
                            <select name="modules" lay-verify="required" lay-search="" id="keyword" lay-filter="keyword">
                                <option value="">直接选择或搜索选择</option>
                            </select>
                        </div>
                        <div class="layui-btn" id="searchBtn3">搜索</div>
                    </div>
                </form>

                <table id="test3" lay-filter="test3" style="width:90%"></table>
            </div>
            <div class="layui-tab-item">
                <form class="layui-form" action="">
                    <div class="layui-inline">
                        <label class="layui-form-label" style="width:100px">电视频道</label>
                        <div class="layui-input-inline">
                            <select name="modules" lay-verify="required" lay-search="" id="keyword4" lay-filter="keyword4">
                                <option value="">直接选择或搜索选择</option>
                            </select>
                        </div>
                        <div class="layui-btn" id="searchBtn4">搜索</div>
                    </div>
                    </form>
                    <table id="test4" lay-filter="test4" style="width:90%"></table>
            </div>
        </div>
    </div>
</main>

<script src="~/Scripts/jquery-3.4.1.min.js"></script>
<script src="~/layui/layui.js"></script>
<script>


    $(function () {

        layui.use(['table', 'element', 'form', 'upload'], function () {
            init();



            var element = layui.element;


            var form = layui.form;
            var table = layui.table;
            var upload = layui.upload;

            var keyword = $("#keyword").val();
            var keyword4 = $("#keyword4").val();
            var dataTable = table.render({
                elem: '#test',
                url: '../Home/GetKOL' /*tpa=/test/table/demo1.json*/
 , cellMinWidth: 150,
                title: '用户数据表',
                where: { keyword: keyword },
                cols: [
                    [
                        {
                            field: "ShareID",
                            title: "ShareID"
                        },
                        {
                            field: "AccountName",
                            title: "AccountName"
                        },
                        {
                            field: "LastFollowerNum",
                            title: "LastFollowerNum"
                        },
                        {
                            field: "男",
                            title: "男"
                        },
                        {
                            field: "女",
                            title: "女"
                        },
                        {
                            field: "00-18岁",
                            title: "00-18岁"
                        },
                        {
                            field: "19-25岁",
                            title: "19-25岁"
                        },
                        {
                            field: "26-30岁",
                            title: "26-30岁"
                        },
                        {
                            field: "31-35岁",
                            title: "31-35岁"
                        },
                        {
                            field: "36-40岁",
                            title: "36-40岁"
                        },
                        {
                            field: "41-45岁",
                            title: "41-45岁"
                        },
                        {
                            field: "46-50岁",
                            title: "46-50岁"
                        },
                        {
                            field: "51-55岁",
                            title: "51-55岁"
                        },
                        {
                            field: "56-60岁",
                            title: "56-60岁"
                        },
                        {
                            field: "61岁以上",
                            title: "61岁以上"
                        },
                        {
                            field: "安徽",
                            title: "安徽"
                        },
                        {
                            field: "北京",
                            title: "北京"
                        },
                        {
                            field: "重庆",
                            title: "重庆"
                        },
                        {
                            field: "福建",
                            title: "福建"
                        },
                        {
                            field: "甘肃",
                            title: "甘肃"
                        },
                        {
                            field: "广东",
                            title: "广东"
                        },
                        {
                            field: "广西",
                            title: "广西"
                        },
                        {
                            field: "贵州",
                            title: "贵州"
                        },
                        {
                            field: "海南",
                            title: "海南"
                        },
                        {
                            field: "河北",
                            title: "河北"
                        },
                        {
                            field: "黑龙江",
                            title: "黑龙江"
                        },
                        {
                            field: "河南",
                            title: "河南"
                        },
                        {
                            field: "湖北",
                            title: "湖北"
                        },
                        {
                            field: "湖南",
                            title: "湖南"
                        },
                        {
                            field: "江苏",
                            title: "江苏"
                        },
                        {
                            field: "江西",
                            title: "江西"
                        },
                        {
                            field: "吉林",
                            title: "吉林"
                        },
                        {
                            field: "辽宁",
                            title: "辽宁"
                        },
                        {
                            field: "内蒙古",
                            title: "内蒙古"
                        },
                        {
                            field: "宁夏",
                            title: "宁夏"
                        },
                        {
                            field: "青海",
                            title: "青海"
                        },
                        {
                            field: "山东",
                            title: "山东"
                        },
                        {
                            field: "上海",
                            title: "上海"
                        },
                        {
                            field: "山西",
                            title: "山西"
                        },
                        {
                            field: "陕西",
                            title: "陕西"
                        },
                        {
                            field: "四川",
                            title: "四川"
                        },
                        {
                            field: "天津",
                            title: "天津"
                        },
                        {
                            field: "新疆",
                            title: "新疆"
                        },
                        {
                            field: "西藏",
                            title: "西藏"
                        },
                        {
                            field: "云南",
                            title: "云南"
                        },
                        {
                            field: "浙江",
                            title: "浙江"
                        }
                    ]
                ],
                limit: 15,
                limits: [10, 15, 20, 30, 50, 100, 500, 1000, 2000],
                page: true
            });


            // 监听搜索按钮点击事件
            document.getElementById('searchBtn3').addEventListener('click', function () {

                // 获取当前分页参数
                var currPage = dataTable3.config.page.curr;
                var pageSize = dataTable3.config.page.limit;
                var keyword = $("#keyword").val();
                // 重新加载表格数据
                table.reload('test3', {
                    where: {
                        keyword: keyword // 将关键词作为参数传递给后端

                    },
                    page: {
                        curr: 1, // 切换到第一页
                        limit: pageSize // 保持每页显示数量不变
                    }
                });
            });


            // 监听搜索按钮点击事件
            document.getElementById('searchBtn4').addEventListener('click', function () {

                // 获取当前分页参数
                var currPage = dataTable4.config.page.curr;
                var pageSize = dataTable4.config.page.limit;
                var keyword4 = $("#keyword4").val();
                // 重新加载表格数据
                table.reload('test4', {
                    where: {
                        keyword: keyword4 // 将关键词作为参数传递给后端

                    },
                    page: {
                        curr: 1, // 切换到第一页
                        limit: pageSize // 保持每页显示数量不变
                    }
                });
            });



            var dataTable2 = table.render({
                elem: '#test2',
                url: '../Home/GetTV' /*tpa=/test/table/demo1.json*/
               
, cellMinWidth: 150,
                title: '用户数据表',
                where: { keyword: keyword },
                cols: [
                    [    {
                        field: "日期",
                        title: "日期",
                        width:200
                    },
                    {
                        field: "频道",
                        title: "频道"
                    },
                    {
                        field: "男",
                        title: "男"
                    },
                    {
                        field: "女",
                        title: "女"
                    },
                    {
                        field: "00-18岁",
                        title: "00-18岁"
                    },
                    {
                        field: "19-25岁",
                        title: "19-25岁"
                    },
                    {
                        field: "26-30岁",
                        title: "26-30岁"
                    },
                    {
                        field: "31-35岁",
                        title: "31-35岁"
                    },
                    {
                        field: "36-40岁",
                        title: "36-40岁"
                    },
                    {
                        field: "41-45岁",
                        title: "41-45岁"
                    },
                    {
                        field: "46-50岁",
                        title: "46-50岁"
                    },
                    {
                        field: "51-55岁",
                        title: "51-55岁"
                    },
                    {
                        field: "56-60岁",
                        title: "56-60岁"
                    },
                    {
                        field: "61岁及以上",
                        title: "61岁及以上"
                    },
                    {
                        field: "14",
                        title: "14"
                    },
                    {
                        field: "广东",
                        title: "广东"
                    },
                    {
                        field: "北京",
                        title: "北京"
                    },
                    {
                        field: "上海",
                        title: "上海"
                    },
                    {
                        field: "浙江",
                        title: "浙江"
                    },
                    {
                        field: "江苏",
                        title: "江苏"
                    },
                    {
                        field: "湖南",
                        title: "湖南"
                    },
                    {
                        field: "湖北",
                        title: "湖北"
                    },
                    {
                        field: "四川",
                        title: "四川"
                    },
                    {
                        field: "山东",
                        title: "山东"
                    },
                    {
                        field: "海南",
                        title: "海南"
                    },
                    {
                        field: "河北",
                        title: "河北"
                    },
                    {
                        field: "江西",
                        title: "江西"
                    },
                    {
                        field: "安徽",
                        title: "安徽"
                    },
                    {
                        field: "吉林",
                        title: "吉林"
                    },
                    {
                        field: "重庆",
                        title: "重庆"
                    },
                    {
                        field: "黑龙江",
                        title: "黑龙江"
                    },
                    {
                        field: "广西",
                        title: "广西"
                    },
                    {
                        field: "云南",
                        title: "云南"
                    },
                    {
                        field: "辽宁",
                        title: "辽宁"
                    },
                    {
                        field: "天津",
                        title: "天津"
                    },
                    {
                        field: "福建",
                        title: "福建"
                    },
                    {
                        field: "宁夏",
                        title: "宁夏"
                    },
                    {
                        field: "新疆",
                        title: "新疆"
                    },
                    {
                        field: "河南",
                        title: "河南"
                    },
                    {
                        field: "陕西",
                        title: "陕西"
                    },
                    {
                        field: "贵州",
                        title: "贵州"
                    },
                    {
                        field: "内蒙古",
                        title: "内蒙古"
                    },
                    {
                        field: "山西",
                        title: "山西"
                    },
                    {
                        field: "甘肃",
                        title: "甘肃"
                    }
                    ]
                ],
                limit: 15,
                limits: [10, 15, 20, 30, 50, 100, 500, 1000, 2000],
                page: true
            });

            var dataTable3 =    table.render({
                elem: '#test3',
                url: '../Home/KOLtoTV' /*tpa=/test/table/demo1.json*/

                , cellMinWidth: 150,
                title: '用户数据表',
                where: { keyword: keyword },
                cols: [
                    [

                    {
                            field: "RankNum",
                        title: "排名"
                        },
                        {
                            field: "AccountName",
                            title: "KOL账号名称"
                        },
                    {
                        field: "ChannelName",
                        title: "电视频道"
                    },
                    {
                        field: "OffsetValue",
                        title: "匹配度"
                    }
                    ]
                ],
                limit: 15,
                limits: [10, 15, 20, 30, 50, 100, 500, 1000, 2000],
                page: true
            });

            var dataTable4 = table.render({
                elem: '#test4',
                url: '../Home/TVtoKOL' /*tpa=/test/table/demo1.json*/

                , cellMinWidth: 150,
                title: '用户数据表',
                where: { keyword: keyword4 },
                cols: [
                    [

                        {
                            field: "RankNum",
                            title: "排名"
                        }, 
                        {
                            field: "ChannelName",
                            title: "电视频道"
                        },
                        {
                            field: "AccountName",
                            title: "KOL账号名称"
                        },
                        {
                            field: "OffsetValue",
                            title: "匹配度"
                        }
                    ]
                ],
                limit: 15,
                limits: [10, 15, 20, 30, 50, 100, 500, 1000, 2000],
                page: true
            });

            function init() {
                var date = new Date();

                $.ajax({
                    url: '../Home/GetAccountName',
                    data: {
                        date: date
                    },
                    dataType: "json",
                    type: "GET",
                    success: function (res) {
                        $.each(res.data, function (i, item) {
                            $("#keyword").append("<option value=\"" + item.AccountName + "\">" + item.AccountName + "</option>");
                        });
                        form.render();
                    },
                    error: function (e) {

                    }
                });

                $.ajax({
                    url: '../Home/GetChannelName',
                    data: {
                        date: date
                    },
                    dataType: "json",
                    type: "GET",
                    success: function (res) {
                        $.each(res.data, function (i, item) {
                            $("#keyword4").append("<option value=\"" + item.ChannelName + "\">" + item.ChannelName + "</option>");
                        });
                        form.render();
                    },
                    error: function (e) {

                    }
                });

            }
        });


    })
</script>